import {Table, Button, Upload, message, Spin, Popconfirm} from 'antd';
import React, { Component } from 'react';
import { TrainList, TrainUpload, DeleteFile } from "@/services/A10/TrainController";
import { ModelTrain } from "@/services/A10/ModelController";
import styles from './model.less';
import {UploadOutlined, WarningOutlined} from "@ant-design/icons";

class ExamplePage extends Component {

  state = {
    data: [],
    columns: [],
    loading:false,
    setLoading:[]
  }

  async componentDidMount() {
    const data = await TrainList();
    const columns = [
      {
        title: '训练文件列表',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '文件大小',
        dataIndex: 'size',
        key: 'size',
      },
      {
        title: '训练',
        dataIndex: 'Download',
        key: 'Download',
        render: (text, record) => {
          return (
            <div>
              <Button type="primary" onClick={() => {
                this.handleTrainModel(record);
              }} className={styles.ButtonInfo} loading={this.state.loading}>
                训练模型
              </Button>
            </div>
            );
        },
      },
      {
        title: '删除',
        key: 'Delete',
        dataIndex: 'Delete',
        render: (text, record) => {
          return (
            <Popconfirm
              title="确定要删除此文件吗?"
              onConfirm={() => this.handleDeleteFile(record)}
              icon={
                <WarningOutlined
                  style={{
                    color: 'red',
                  }}
                />
              }
            >
            <Button type="primary" danger className={styles.ButtonInfo}>删除文件</Button>
            </Popconfirm>
          );
        },
      }
    ];
    this.setState({columns});
    this.setState({ data });
  }

  loadData = async () => {
    const data = await TrainList();
    this.setState({ data });
  }


  handleDeleteFile = (record) => {
    DeleteFile(record).then((resp) => {
      if(resp.data=="success"){
        message.success("删除文件成功");
      }
      this.loadData();
    });
  }

  handleTrainModel = (record) => {
    this.setState({ loading: true }, () => {
      const columns = [
        {
          title: '训练文件列表',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '文件大小',
          dataIndex: 'size',
          key: 'size',
        },
        {
          title: '训练',
          dataIndex: 'Download',
          key: 'Download',
          render: (text, record) => {
            return (
              <div>
                <Button type="primary" onClick={() => {
                  this.handleTrainModel(record);
                }} className={styles.ButtonInfo} loading={this.state.loading}>
                  训练模型
                </Button>
              </div>
            );
          },
        },
        {
          title: '删除',
          key: 'Delete',
          dataIndex: 'Delete',
          render: (text, record) => {
            return (
              <Popconfirm
                title="确定要删除此文件吗?"
                onConfirm={() => this.handleDeleteFile(record)}
                icon={
                  <WarningOutlined
                    style={{
                      color: 'red',
                    }}
                  />
                }
              >
                <Button type="primary" danger className={styles.ButtonInfo}>删除文件</Button>
              </Popconfirm>
            );
          },
        }
      ];
      this.setState({columns});

      ModelTrain(record).then((resp) => {
        if(resp.data=="success"){
          this.setState({ loading: false });
          const columns = [
            {
              title: '训练文件列表',
              dataIndex: 'name',
              key: 'name',
            },
            {
              title: '文件大小',
              dataIndex: 'size',
              key: 'size',
            },
            {
              title: '训练',
              dataIndex: 'Download',
              key: 'Download',
              render: (text, record) => {
                return (
                  <div>
                    <Button type="primary" onClick={() => {
                      this.handleTrainModel(record);
                    }} className={styles.ButtonInfo} loading={this.state.loading}>
                      训练模型
                    </Button>
                  </div>
                );
              },
            },
            {
              title: '删除',
              key: 'Delete',
              dataIndex: 'Delete',
              render: (text, record) => {
                return (
                  <Popconfirm
                    title="确定要删除此文件吗?"
                    onConfirm={() => this.handleDeleteFile(record)}
                    icon={
                      <WarningOutlined
                        style={{
                          color: 'red',
                        }}
                      />
                    }
                  >
                    <Button type="primary" danger className={styles.ButtonInfo}>删除文件</Button>
                  </Popconfirm>
                );
              },
            }
          ];
          this.setState({columns});
          message.success("模型训练完成");
        }else {
          message.error("模型训练失败");
        }
      });
    });
    // console.log(this.state.loading)
  }

  handleTrainUpload = (record) => {
    TrainUpload(record).then(() => {
      this.loadData();
    });
  }

  handleButtonClick = () => {
    this.setState({ loading: true }); // 设置 loading 状态为 true，即显示 Spin
    // 在这里执行异步操作，等异步操作完成后设置 loading 状态为 false，即隐藏 Spin
  }

  handleUpload = (info) => {
      if (info.file.status !== 'uploading') {
        console.log(info.file.data);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
        const formData = new FormData();
        formData.append('file', info.file.originFileObj, info.file.name); // 将文件数据添加到 formData 对象中
        this.handleTrainUpload(formData);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
  }

  render() {
    const { data } = this.state;
    const { columns ,loading} = this.state;
    return (
          <div>
            <Table columns={columns} dataSource={data}></Table>
            <Upload showUploadList={false} onChange={this.handleUpload} multiple={true}>
              <Button icon={<UploadOutlined />} className={styles.train}>上传训练文件</Button>
            </Upload>
            <div className={styles.spin}>
            </div>
          </div>
    );
  }

}

export default ExamplePage;
